<template>
  <div class="indexContainer">
    <div class='mopai_bg'>
      <img src='/static/images/bg@3x.png' class='mopai_bg_img'/>
      <div class='logo_img' v-if='userInfo'>
        <img :src='imgHost+userInfo.tenantLogo' class='logo'/>
      </div>
    </div>
    <div class="wrap"  @tap='toDetail("order_list")'>
      <img src='/static/images/home_btn_bg@3x.png' class='echart_bg'/>
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleInit" ref="echarts" disableTouch/>
    </div>
    <div class='grid-icons'>
      <scroll-view  style="height:100%" :scroll-y="true" >
      <i-grid>
        <i-grid-item i-class='p10' @tap='toDetail("sign")'>
            <i-grid-icon>
                <image src="/static/images/home_icon_sign@2x.png" />
            </i-grid-icon>
            <i-grid-label i-class='item-label'>签到</i-grid-label>
        </i-grid-item>
         <i-grid-item i-class='p10 public' @tap='toDetail("notice_list")'>
            <div class='circle' v-if='show'></div>
            <i-grid-icon>
                <image src="/static/images/notice@3x.png" />
            </i-grid-icon>
            <i-grid-label i-class='item-label'>公告</i-grid-label>
        </i-grid-item>
        <i-grid-item i-class='p10' @tap='toDetail("device_list",1)'>
             <i-grid-icon>
                <image src="/static/images/home_icon_facility@2x.png" />
            </i-grid-icon>
            <i-grid-label i-class='item-label'>设备</i-grid-label>
        </i-grid-item>
        <i-grid-item i-class='p10' @tap='toDetail("alarm_list")'>
            <i-grid-icon>
                <image src="/static/images/home_icon_alarm@2x.png" />
            </i-grid-icon>
            <i-grid-label i-class='item-label'>报警</i-grid-label>
        </i-grid-item>
    </i-grid>
    <i-grid>
        <i-grid-item i-class='p10' @tap='toDetail("fault_rate")'>
            <i-grid-icon>
                <image src="/static/images/home_icon_faultrate@2x.png" />
            </i-grid-icon>
            <i-grid-label i-class='item-label'>故障率</i-grid-label>
        </i-grid-item>
        <i-grid-item i-class='p10' @tap='toDetail("finish_rate")'>
            <i-grid-icon>
                <image src="/static/images/home_icon_finish@2x.png" />
            </i-grid-icon>
            <i-grid-label i-class='item-label'>完成率</i-grid-label>
        </i-grid-item>
        <i-grid-item i-class='p10'  @tap='toDetail("health_rate")'>
            <i-grid-icon>
                <image src="/static/images/home_icon_health@2x.png" />
            </i-grid-icon>
            <i-grid-label i-class='item-label'>健康度</i-grid-label>
        </i-grid-item>
       
        <i-grid-item i-class='p10' @tap='toDetail("order_statistics")'>
             <i-grid-icon>
                <image src="/static/images/home_icon_visual@2x.png" />
            </i-grid-icon>
            <i-grid-label i-class='item-label'>工单统计</i-grid-label>
        </i-grid-item>
    </i-grid>
    <i-grid>
       <i-grid-item i-class='p10' @tap='toDetail("subordinate_manage")' >
            <i-grid-icon>
                <image src="/static/images/home_icon_underling_@3x.png" />
            </i-grid-icon>
            <i-grid-label i-class='item-label'>下属管理</i-grid-label>
        </i-grid-item>
        <i-grid-item i-class='p10'  @tap='toDetail("device_list",2)'>
            <i-grid-icon>
                <image src="/static/images/home_icon_constantly.png" />
            </i-grid-icon>
            <i-grid-label i-class='item-label'>实施工况</i-grid-label>
        </i-grid-item>
        <i-grid-item i-class='p10'>
        </i-grid-item>
        <i-grid-item i-class='p10'>
        </i-grid-item>
    </i-grid>
    </scroll-view>
    </div>
    <tab-bar :selectNavIndex="0"></tab-bar>
  </div>
</template>

<script type="text/javascript">
import tabBar from '../tab_bar/tab_bar.vue';
import * as echarts from 'echarts/dist/echarts.min';
import mpvueEcharts from 'mpvue-echarts';
import { mapState } from 'vuex'
let chart = null;
export default {
  components:{
      tabBar,
      mpvueEcharts
  },
  onLoad(){
    wx.hideTabBar()
  },
  beforeMount() {
    var query = this.$root.$mp.query;
    var userId = query.userId || wx.getStorageSync('userId');
    if(userId) this.getUserInfo(userId)
  },
  onShow(){
    if(this.userInfo && this.userInfo.ukey) this.queryNotice()
  },
  data() {
    return {
      index:0,
      echarts,
      option: null,
      show:false
    }
  },
  methods:{
    getUserInfo(userId){
      this.$http.post({
          url:'/common/getUserInfo',
          data:{
            userId
          }
      }).then(res=>{
        this.$store.dispatch('setUserInfo',res);
        this.findOrder();
        this.queryNotice();
      }).catch(e=>{
        console.error('获取失败',e)
      })
    },
    initChart ({
      unsentCount=0,
      unacceptedCount=0,
      acceptedCount=0,
      finishedCount=0
    }) {
      var sum = unsentCount+unacceptedCount+acceptedCount+finishedCount;
      var datas =  [
          {
            value: unsentCount==0?null:unsentCount,
            name: '待派'
          },
          {
            value: unacceptedCount==0?null:unacceptedCount,
            name: '待接'
          },
          {
            value: acceptedCount==0?null:acceptedCount,
            name: '已接'
          },
          {
            value: finishedCount==0?null:finishedCount,
            name: '待审'
          }
    ];
      this.option = {
            title: {
              text:sum ,
              subtext: '待处理',
              x: '28%',
              y: '35%',
              textAlign:'center',
              textStyle: {
                  fontSize:24,
                  fontWeight:'normal',
                  color: '#eef7fd',
                  lineHeight:20
              },
              subtextStyle: {
                  color: '#cee5f3',
                  fontSize: 13,
                  lineHeight:20
              },
        },
        backgroundColor: 'transparent',
        color: ['#0edcf3', '#9ce21f', '#ff9b3b', '#fa6698'],
        legend: {
          left: '55%',
          top:'15%',
          icon:'circle',
          orient:'vertical',
          align:'left',
          itemWidth:12,
          itemHeight:12,
          formatter:  function(name){
                  var target;
                  for (var i = 0, l = datas.length; i < l; i++) {
                      if (datas[i].name == name) {
                        target = datas[i].value;
                        if(target==null) target = 0;
                      }
                  }
                  var arr = [
                      '{a|'+name+'}',
                      '{b|'+target+'}',
                  ]
                  return arr.join('')
          },
          textStyle:{
                rich:{
                    a:{
                        fontSize:12,
                        align:'center',
                        color: '#cee5f3',
                        padding: [0, 4, 0, 0]
                    },
                    b:{
                        fontSize:20,
                        color: '#eef7fd'
                    }
                }
            }
        },
        series: [{
          label: {
              normal: {
                  show:false
              }
          },
          labelLine: {
              normal: {
                  show: false
              }
          },
          type: 'pie',
          center: ['30%', '50%'],
          radius: ['57%', '67%'],
          data:datas,
          /* itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 2, 2, 0.3)'
            }
          } */
        }]
      }
      this.$refs.echarts.init()
    },
    handleInit (canvas, width, height) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      chart.setOption(this.option)
      return chart
    },
    toDetail(page,type){
      var url = `/pages/${page}/main`;
      if(type!= undefined){
        url+=`?type=${type}`;
      }
      wx.navigateTo({
        url
      })
    },
    findOrder(){
      this.$http.post({
          url:'/order/getRealtimeSummary',
          data:{
            ukey:this.userInfo.ukey,
            groupId:this.userInfo.groupId,
          }
        }).then((res)=>{
          if(res.s==0){
            this.initChart(res.i.Data)
          }
        }).catch((e)=>{
          console.log('请求失败',e)
        })
    },
    queryNotice(){
        this.$http.post({
          url:'/notice/findUnReadList',
          data:{
              ukey:this.userInfo.ukey
          }
          }).then((res)=>{
              if(res.s==0){
                  this.show = res.i.Data.length>0;
              }
          }).catch((e)=>{
              console.log('请求失败',e)
          })
    }
  },
  computed:{
    ...mapState(['userInfo','imgHost']),
  }
}
</script>

<style lang='less'>
  page{
    background:#eef7fd;
    height:100%;
  }
  ::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
  }
  .indexContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mopai_bg{
    width:100%;
    position: relative;
    .mopai_bg_img{
      width:100%;
      height: 315rpx;
    }
  }
  .mopai_bg .logo_img{
    position: absolute;
    left: 50%;
    top:32%;
    width: 240rpx;
    height: 120rpx;
    margin-left: -120rpx;
    margin-top:-50rpx;
    .logo{
      width: 240rpx;
      height: 120rpx;
    }
  }
  .wrap {
    position: relative;
    width: 585rpx;
    height: 356rpx;
    border-radius:5px;
    overflow: hidden;
    background-size: 100% 100%;
    margin-top:-98rpx;
    z-index: 2; 
    .echart_bg{
      position: absolute;
      width: 100%;
      height: 356rpx;
      z-index: -1;
    }
  }
  .grid-icons{
    width:84%;
    flex:1;
    height: 200rpx;
    margin: 10px 0;
  }
  .public{
    position: relative;
    .circle{
      position: absolute;
      width: 20rpx;
      height: 20rpx;
      border-radius: 10rpx;
      background: red;
      right: 12rpx;
      top: 12rpx;
    }
  }
  .p10{
    padding:10px 0!important;
  }
  .item-label{
      color: #828689!important;
  }
</style>
